<template>
    <div class="rechargepoint">
        <div class="con">
            <van-nav-bar :border="false" left-arrow @click-left="onClickLeft" />
            <div class="top">
                <div class="tit">爆单积分余额</div>
                <div class="num">{{ userInfo.hasscore }}</div>
            </div>
            <div class="crad">
                <div class="tit">输入充值爆单积分数量</div>
                <div class="num">
                    <van-cell-group :border="false" inset>
                        <van-field v-model="number" size="large" type="number" maxlength="6"><template #extra>积分</template>
                        </van-field>
                    </van-cell-group>
                </div>
                <div class="price">
                    <div class="num">
                        ￥<span>{{ number == '' ? '0.00' : number }}</span>
                        元
                    </div>
                    <!-- <div v-html="paymentHtml"></div> -->
                    <van-button @click="clickOK">确认充值</van-button>
                </div>
            </div>

            <van-popup v-model:show="show" round>
                <div class="intiveCode">
                    <qrcode-vue id="qrcode" class="QRimage"
                        :value="'https://app.changgongwang.com/index/index/h5Pay?' + 'order_no=' + paymentHtml"
                        size:700></qrcode-vue>
                </div>
            </van-popup>
        </div>
    </div>

</template>

<script setup lang="ts">
// import { useStore } from 'vuex';

import { ref, onMounted } from 'vue';
import { Toast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import { reCharge } from '../../../api/index';

import QrcodeVue from 'qrcode.vue'

// const formData = ref(new FormData());
const number = ref("");
const paymentData = ref({});
const paymentHtml = ref('');
const showForm = ref(false);
const router = useRouter();
const userInfo = JSON.parse(window.localStorage.getItem("userInfo") as string)
const show = ref(false)

let formData = new FormData();
// 定义onClickLeft方法
const onClickLeft = () => history.back();
const routerTo = (str: string) => router.push('/mine/myteam/' + str.toLowerCase())

// const clickOK = async () => {
//     formData.append("money", number.value);

//     const res = await reCharge(formData);
//     console.log(res)
//     if (res.code === 1) {
//         paymentHtml.value = res.data;
//         // showForm.value = true; // 显示表单
//         let payInfo = document.querySelector('.form');
//         console.log(payInfo)
//         document.forms[0].submit();
//     } else {
//         Toast.fail(res.msg);
//     }

//     formData = new FormData();
// };

const clickOK = () => {
    formData.append("money", number.value)
    reCharge(formData).then(res => {
        console.log(res);
        if (res.code == 1) {
            console.log(res.data)
            paymentHtml.value = res.data;
            console.log(paymentHtml);

            number.value = ''
            // router.push({
            //     path: window.open('https://app.changgongwang.com/index/index/h5Pay?order_no=' + paymentHtml.value)
            // })
            show.value = true;
        } else {
            Toast(res.msg)
        }
    })
}





// const clickOK = () => {
//     formData.append("money", number.value)
//     reCharge(formData).then(res => {
//         /* {
//     "pay_url": "https://vsp.allinpay.com/apiweb/unitorder/pay&#34;, 
//     "cusid": "56349105651R6V1",
//     "appid": "00317165",
//     "version": "11",
//     "orgid": "",
//     "trxamt": 1100,
//     "reqsn": "2233254935651518",
//     "paytype": "W02",
//     "body": "报单积分充值",
//     "remark": "报单积分充值",
//     "notify_url": "https://vsp.allinpay.com/apiweb/unitorder&#34;, 
//     "limit_pay": "",
//     "subbranch": "",
//     "cusip": "",
//     "idno": "",
//     "truename": "",
//     "fqnum": "",
//     "randomstr": "2d504c8637a2518c81d8f35db1f5396d",
//     "signtype": "RSA",
//     "sign": "aGwfR76TYOExqIqp3vXk6IJHqdpXvwdLRAUyUu%2FY0ZbcKhmUs8ZSIEnC%2FpvpU54FKrHMEnwKiavY%2BXhAFbF%2FC18nbN%2BYOFjsgq%2BvCT%2FBgYdDK9660nEB22A2phCo56BvUDDOY3d2UhJg1aQzJ6%2FgDtVIdZDzbLQxWX9qeBhxt8Jm5KR7r332zKchlqn6aSfc7aCqk3JO3rU%2BU1GGyGtj20J5SkLzANeueL2BV0peI%2BrdGQJtGmpbyd84pdDWIXMpra%2BwMDxvdmZdxcRNCB58B0p6XaSpmHQzIEJWhapGK8525v%2FpNTnzbFkgP%2Bky9NFMecaZgaT0W9fvbBrh1oWrhw%3D%3D"
// } */
//         if (res.code == 1) {
//             console.log(res.data)
//             paymentHtml.value = res.data;
//             // let jsonData = res.data
//             // // 创建 FormData 实例
//             // formData = new FormData();
//             // // 将 JSON 数据遍历并添加到 FormData
//             // for (const [key, value] of Object.entries(jsonData)) {
//             //     formData.append(key, value);
//             // }

//             // reChargeStep2(jsonData.pay_url, formData)
//             //     .then(data => {
//             //         console.log('服务器响应数据:', data);
//             //     })
//             //     .catch(error => {
//             //         console.error('请求失败:', error);
//             //     });
//         } else {
//             Toast(res.msg)
//         }
//     })
// }


/* const submitPayment = () => {
    const payForm = document.getElementById('payForm');
    // 这里可以使用 fetch 或者其他方式来处理表单数据的提交
    // 例如使用 fetch 发送 FormData
    fetch(payForm.action, {
        method: payForm.method,
        body: new FormData(payForm),
    })
        .then(response => response.json())
        .then(data => {
            console.log('服务器响应数据:', data);
            // 处理服务器响应
        })
        .catch(error => {
            console.error('请求失败:', error);
            Toast.fail('支付提交失败');
        });
}; */

/* const clickOK=()=>{
    formData.append("money", number.value)
    reCharge(formData).then(res=>{
        {
    "pay_url": "https://vsp.allinpay.com/apiweb/unitorder/pay",
    "cusid": "56349105651R6V1",
    "appid": "00317165",
    "version": "11",
    "orgid": "",
    "trxamt": 1100,
    "reqsn": "2233254935651518",
    "paytype": "W02",
    "body": "报单积分充值",
    "remark": "报单积分充值",
    "notify_url": "https://vsp.allinpay.com/apiweb/unitorder",
    "limit_pay": "",
    "subbranch": "",
    "cusip": "",
    "idno": "",
    "truename": "",
    "fqnum": "",
    "randomstr": "2d504c8637a2518c81d8f35db1f5396d",
    "signtype": "RSA",
    "sign": "aGwfR76TYOExqIqp3vXk6IJHqdpXvwdLRAUyUu%2FY0ZbcKhmUs8ZSIEnC%2FpvpU54FKrHMEnwKiavY%2BXhAFbF%2FC18nbN%2BYOFjsgq%2BvCT%2FBgYdDK9660nEB22A2phCo56BvUDDOY3d2UhJg1aQzJ6%2FgDtVIdZDzbLQxWX9qeBhxt8Jm5KR7r332zKchlqn6aSfc7aCqk3JO3rU%2BU1GGyGtj20J5SkLzANeueL2BV0peI%2BrdGQJtGmpbyd84pdDWIXMpra%2BwMDxvdmZdxcRNCB58B0p6XaSpmHQzIEJWhapGK8525v%2FpNTnzbFkgP%2Bky9NFMecaZgaT0W9fvbBrh1oWrhw%3D%3D"
}
        if (res.code==1) {
            console.log(res.data)
            let jsonData = res.data
            // 创建 FormData 实例
            formData = new FormData();
            // 将 JSON 数据遍历并添加到 FormData
            for (const [key, value] of Object.entries(jsonData)) {
                formData.append(key, value);
            }
            
            reChargeStep2(jsonData.pay_url, formData)
                .then(data => {
                    console.log('服务器响应数据:', data);
                })
                .catch(error => {
                    console.error('请求失败:', error);
                });
        } else {
            Toast(res.msg)
        }
    })
} */

onMounted(() => {

});
</script>

<style lang="less" scoped>
.rechargepoint {
    background: #2B2C30;
    width: 100%;
    height: 329px;
    background-image: url(../../../assets/爆单积分充值_slices/bgk.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 345px;
}

.con {
    .van-nav-bar {
        height: 52px;
        background: none;
        color: #FFFFFF;
        content: none;
        padding: 34px 20px 0;
    }

    .top {
        // margin-top: 50px;
        display: flex;
        height: 100px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        padding: 0 20px 0;
        font-size: 18px;
        color: #FFFFFF;
    }

}

.crad {
    margin-top: 20px;
    width: 100%;
    // min-height: 300px;
    height: calc(100vh - 213px);
    background: #FFFFFF;
    border-radius: 20px 20px 0px 0px;
    padding: 15px 22px;
    box-sizing: border-box;
    font-size: 16px;
    color: #232323;
    text-align: left;

    .num {
        span {
            font-size: 30px;
            color: #3D3D3D;
        }

        margin: 30px auto
    }

    .price {
        width: 338px;
        height: 51px;
        background: #232323;
        border-radius: 623px 623px 623px 623px;
        color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;

        .num {
            width: calc(338px - 150px);
            padding-left: 19px;

            span {
                color: #FFFFFF;
            }
        }

        .van-button {
            width: 150px;
            height: 51px;
            background: #0A7FF6;
            border-radius: 623px 623px 623px 623px;
            font-size: 15px;
            color: #FFFFFF;
            border: 0;
        }
    }
}

:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #FFFFFF;

}

:deep(.van-field__body) {
    font-size: 30px;
    border-bottom: 1px solid #EBEBEB;
}

:deep(.van-nav-bar__left) {
    padding: 0;
}

:deep(.van-nav-bar__content .van-nav-bar__title) {
    color: #FFFFFF;
}

// :deep(.van-hairline--bottom::after){
//     content: none;
// }
.intiveCode {
    width: 225px;
    height: 195px;
    background: #FFFFFF;
    border-radius: 13px 13px 13px 13px;
    box-sizing: border-box;
    padding: 20px auto;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .tit {
        font-size: 14px;
        color: #3D3D3D;
    }

    .QRimage {
        margin: 25px auto 20px;
    }

    .con {
        padding: 0;

        span {
            font-size: 12px;
            color: #3D3D3D;

            &:nth-child(2) {

                margin: 0 8px;
            }

            &:nth-child(3) {
                color: #0A83FD;
            }
        }
    }
}

.intiveCode {
    width: 225px;
    height: 210px;
    background: #FFFFFF;
    border-radius: 13px 13px 13px 13px;
    box-sizing: border-box;
    padding: 20px auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
</style>